<?php
/**
 * @package		Joomla.Site
 * @subpackage	mod_articles_latest
 * @copyright	Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 */

// no direct access
defined('_JEXEC') or die;
//$doc=JFactory::getDocument();
//$doc->addScript('//code.jquery.com/jquery-1.11.2.min.js', 'text/javascript');
?>
<style>
.ltitem { position:relative; height:117px; margin-bottom:10px}
.ltitem a { text-transform:uppercase; font-size:1.2em; color: #fff;}

span.title { display:none; position:absolute; width:180px; height:90px; left:0; top:0; text-align:center; padding: 27px 10px 0; background:rgba(0,102,255,.75)}
span.title em{ font-size:12px;}
</style>
<script>
jQuery(function($){
	$('.ltitem a').hover(
		function() {
			$( this ).find( "span.title" ).fadeToggle(500);
		});
});
</script>
<div class="latestnews<?php echo $moduleclass_sfx; ?>">

<?php foreach ($list as $item) :  $images = json_decode($item->images); 
	if($images->image_intro=='') $images->image_intro = 'images/default-image.jpg';
	?>
	<div class="ltitem">
    <a href="<?php echo $item->link; ?>" title="<?php echo $item->title; ?>">
    	<img width="100%" src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
        <span class="title"><?php echo $item->title; ?><br><em><?php echo JText::sprintf('COM_CONTENT_PUBLISHED_DATE_ON', JHtml::_('date', $item->publish_up, JText::_('DATE_FORMAT_LC4'))); ?></em></span>
	</a>
	</div>
<?php endforeach; ?>
</ul>
</div>
